 <template>
	<view class="login_bg">
	<view class="back"><em @click="back"><image src="../../static/images/left.png" mode="widthFix"></image></em></view>
	 <view class="yzm_img"><image src="../../static/images/sms_bg-178b4dbf.png" mode="widthFix"></image></view>
	 <view>
		 <p class="dx_yzm">输入短信验证码</p>
		 <p class="dxx_yzm">我们已向{{mobile}}发送验证码短信</p>
		 <p class="dxx_yzm">请查看短信并输入验证码</p>
	 </view>
	 <view class="yzm_login"> 
		<uv-code-input v-model="code" @finish="finish" :maxlength="6" :focus="true" mode="line" color="#fff"></uv-code-input>
		
	  </view>
	  <view>
		  <view class="repeat_yzm" @click="reSend">重发验证码<text style="margin-left: 0.3rem;" v-show="lostTime>0">{{lostTime}}</text></view>
		  
	  </view>
	</view>
</template>

<script>
	import request from '../../utils/http.js'
	export default {
		beforeCreate() {
			const domModule = uni.requireNativePlugin('dom')
			domModule.addRule('fontFace', {
				'fontFamily': "iconfont",
				'src': "url('../../static/font/icofont.ttf')",
				'src': "url('../../static/font/icofont.woff')",
				'src': "url('../../static/font/icofont.woff2')"
			});
		},
		data() {
			return {
				mobile:'',
				lostTime:60,
				code: '',
				IntervalObj:''
			};
		},
		onLoad(option) {
			this.mobile = option.m
			this.IntervalObj = setInterval(()=>{
				this.countdown()
			},1000)
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1,
				})
			},
			finish(e) {
				this.login()
			},
			login(){
				request({
					url: '/Auth/smsLogin',
					method:'post',
					data: {mobile:this.mobile,code:this.code},
					header: {
						"Content-Type":"application/x-www-form-urlencoded"
					}
				}).then(res => {
					console.log(res);
					let result = res.data;
					if(result.code==1){
						uni.setStorageSync("token",result.data.token)
						uni.setStorageSync("nickname",result.data.nickname)
						uni.setStorageSync("sex",result.data.gender)
						uni.switchTab({
							url:"/pages/index/index",
						})
					}else{
						uni.showToast({
							icon:'error',
							title:result.msg
						})
					}
				}).catch(err => {
				  console.error(err);
				});
			},
			reSend(){
				if(this.lostTime>0){
					
				}else{
					this.sendCode()
				}
			},
			sendCode(){
				request({
					url: '/tools/sendSms',
					method:'post',
					data: {scan:'login',mobile:this.mobile},
					header: {
						"Content-Type":"application/x-www-form-urlencoded"
					}
				}).then(res => {
					let result = res.data;
					if(result.code==1){
						this.lostTime = 60
					}else{
						uni.showToast({
							icon:'error',
							title:result.msg
						})
					}
				}).catch(err => {
				  console.error(err);
				});
			},
			countdown(){
				if(this.lostTime>0){
					this.lostTime--;
				}else{
					clearInterval(this.IntervalObj)
					this.IntervalObj = ""
				}
			}
		},
		watch:{
			'lostTime':function(){
				if(this.lostTime>0&&!this.IntervalObj){
					this.IntervalObj = setInterval(()=>{
						this.countdown()
					},1000)
				}
			}
		}
		
	};
</script>

<style>
	@import "../../static/css/yzm.css";
	@import "../../static/css/iconfont.css";
</style>
